<template>
  <div class="home">
  	<div class="lian"><p>靓女汇商城</p></div>
  	<!--<div class="swaper_img"><img :src="s5"/></div>-->
  	<lunbotu class="lun"></lunbotu>
  	<ul>
  		<li><div class="div_img"><img src="../assets/img/s7.png"/></div></li>
			<li><p>优品汇专区</p></li>
			<li class="li_img6"><img src="../assets/img/s6.png"/></li>
  		<li><div class="div_img"><img src="../assets/img/s8.png"/></div></li>
  		<li><p>秒杀专区</p></li>
			<li class="li_img6"><img src="../assets/img/s6.png"/></li>
  		<li><div class="div_img"><img src="../assets/img/s9.png"/></div></li>
  		<li><p>分类</p></li>
  	</ul>
  	
  	<div class="xinpin_imgx1"><img src="../assets/img/x1.png"/></div>
  	
  	<div class="xinpin_imgx2_3">
  		<div class="xinpin_imgx2"><img src="../assets/img/x2.png"/></div>
  		<div class="xinpin_imgx3"><img src="../assets/img/x3.png"/></div>
  	</div>
  	<div class="xinpin_imgx2_3">
  		<div class="xinpin_imgx2"><img src="../assets/img/x4.png"/></div>
  		<div class="xinpin_imgx3"><img src="../assets/img/x5.png"/></div>
  	</div>
  	<div class="xinpin_imgx2_3">
  		<div class="xinpin_imgx2"><img src="../assets/img/x6.png"/></div>
  		<div class="xinpin_imgx3"><img src="../assets/img/x7.png"/></div>
  	</div>
  	<div class="xinpin_imgx2_3">
  		<div class="xinpin_imgx2"><img src="../assets/img/x8.png"/></div>
  		<div class="xinpin_imgx3"><img src="../assets/img/x9.png"/></div>
  	</div>
  	<!--分类-->
  	<div class="lian"><p>分类</p></div>
  	
  	<div class="fenlei_pimg" v-for="item in list">
  		<p>{{item.name}}</p>
  		<div class="fenlei_imgb1"><img :src="item.goodsList[0].list_pic_url"/></div>
  	</div>
  	
  	<!--优品汇专区-->
  	<div class="lian"><p>优品汇专区</p></div>
  	<div class="youpinhuizhuanqu">
  		<div class="youpinhuizhuanqu_imgy1"><img src="../assets/img/y1.png"/></div>
  		<p>2018好物优惠推荐</p>
  		<router-link to="/Shanpin">
  			<p class="dianji">点击进入</p>
  		</router-link>
  	</div>
  	
  	<!--VIP会员专区-->
  	<div class="lian"><p>VIP会员专区</p></div>
  	<div class="youpinhuizhuanqu">
  		<div class="youpinhuizhuanqu_imgy1"><img src="../assets/img/v1.png"/></div>
  		<p>2018VIP新品上新</p>
  		<router-link to="/Shanpin">
  			<p class="dianji">点击进入</p>
  		</router-link>
  	</div>
  	<router-link to="/Fenlei"><div class="imgv2"><img src="../assets/img/v2.png"/></div></router-link>
  </div>
</template>

<script>
import s5 from "@/assets/img/s5.png"
import lunbotu from '@/components/SowingMap.vue'
import Axios from 'axios'

export default {
  name: 'home',
  data(){
  	return {
  		s5,
  		list:[]
  	}
  },
  components: {
    lunbotu
  },
 created(){
 	var api = "https://nideshop.bluej.cn/api/"
 	Axios.get(api).then((res)=>{
 		console.log(res)
   		this.list=res.data.data.categoryList
 	}).catch((err)=>{
 		console.log(err)
 	})
 }
}
</script>

<style lang="scss">
@function p($px){
@return $px/2+px;
}

.home{
	overflow: hidden;
	padding-bottom: p(100);
	.lun{
		width: 100%;
		img{
			width: 100%;
		}
	}
	.lian{
		width: 100%;
		p{
			font-size: p(28);
			text-align: center;
			margin: p(26) 0;
		}
	}
	.swaper_img{
		width: 100%;
		img{
			width: 100%;
		}
	}
	ul{
		width: 100%;
		height: p(89);
		li{
			float: left;
			line-height: 4;
			margin-left: p(20);
			.div_img{
				width: p(86);
				img{
					width: 100%;
				}
			}
			p{
				font-size: p(23);
				font-weight: bold;
			}
		}
		.li_img6{
			height: p(49);
			img{
				height: 100%;
			}
		}
	}
	.xinpin_imgx1{
		width: 100%;
		img{
			width: 100%;
		}
	}
	.xinpin_imgx2_3{
		position: relative;
		.xinpin_imgx2{
			width: 100%;
			img{
				width: 100%;
			}
		}
		.xinpin_imgx3{
			width: 58%;
			position: absolute;
			top: p(80);
			left: p(160);
			img{
				width: 100%;
			}
		}
	}
	.fenlei_pimg{
		width: 100%;
		height: p(232);
		background: #e4e4e4;
		margin-bottom: p(21);
		position: relative;
		p{
			width: 40%;
			font-size: p(37);
			font-weight: bold;
			position: absolute;
			top: p(82);
			text-align: center;
		}
		.fenlei_imgb1{
			float: left;
			width: p(204);
			margin-left: p(428);
			img{
				width: 100%;
			}
		}
	}
	.youpinhuizhuanqu{
		width: 100%;
		border-bottom: 1px solid #bbbbbc;
		.youpinhuizhuanqu_imgy1{
			width: 100%;
			img{
				width: 100%;
			}
		}
		p{
			margin: p(29) 0;
			text-align: center;
			font-size: p(18);
		}
		.dianji{
			width: 25%;
			border: 1px solid #000;
			color: #000;
			margin: p(29) auto;
			font-size: p(18);
			padding: p(10);
		}
	}
	.imgv2{
		width: 100%;
		margin: p(30) 0;
		img{
			width: 100%;
		}
	}
}

</style>